<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>menu</title>
    <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all" />
    <link rel="stylesheet" th:href="@{/lib/layui-v2.6.3/css/layui.css}" media="all" />
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all" />
    <style>
      .layui-btn:not(.layui-btn-lg):not(.layui-btn-sm):not(.layui-btn-xs) {
        height: 34px;
        line-height: 34px;
        padding: 0 8px;
      }
    </style>
  </head>
  <body>
    <div class="layuimini-container">
      <div class="layuimini-main">
        <!--        <blockquote class="layui-elem-quote">-->
        <!--            Layui的树形表格treeTable，支持异步加载(懒加载)、复选框联动、折叠状态记忆。<br>-->
        <!--            <a href="https://gitee.com/whvse/treetable-lay" target="_blank" class="layui-btn layui-btn-danger">treetable-lay</a>-->
        <!--        </blockquote>-->
        <div>
          <div class="layui-btn-group">
            <button class="layui-btn" id="btn-expand">全部展开</button>
            <button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
            <button class="layui-btn layui-btn-warm" id="addChild">新增</button>
          </div>
          <table id="munu-table" class="layui-table" lay-filter="munu-table"></table>
        </div>
      </div>
    </div>
    <input id="btn-refresh" style="display: none" />
    <!-- 操作列 -->
    <script type="text/html" id="auth-state">
      <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script id="menu-status" type="text/html">
      <input type="checkbox" name="enable" value="{{d.roleId}}" lay-skin="switch" lay-text="启用|禁用"
      lay-filter="role-enable" {{ d.status == '0' ? 'checked' : '' }}>
    </script>

    <script id="menu-visible" type="text/html">
      <input type="checkbox" name="enable" value="{{d.roleId}}" lay-skin="switch" lay-text="显示|隐藏"
      lay-filter="role-enable" {{ d.visible == '0' ? 'checked' : '' }}>
    </script>

    <script th:src="@{/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
    <script th:src="@{/js/lay-config.js?v=1.0.4}" charset="utf-8"></script>
    <script th:inline="none">
      layui.use(['table', 'layer', 'treetable'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var treetable = layui.treetable;

        // 渲染表格
        var renderTable = function () {
          layer.load(2);
          treetable.render({
            treeColIndex: 1,
            treeSpid: 0,
            treeIdName: 'menuId',
            treePidName: 'parentId',
            elem: '#munu-table',
            url: '/sys-menu/query',
            page: false,
            cols: [
              [
                { type: 'numbers' },
                { field: 'menuName', minWidth: 200, title: '菜单名称' },
                { field: 'perms', title: '权限标识' },
                { field: 'path', title: '菜单url' },
                { field: 'orderNum', width: 80, align: 'center', title: '排序号' },
                { field: 'visible', width: 120, align: 'center', title: '是否显示', templet: '#menu-visible' },
                { field: 'status', width: 120, align: 'center', title: '状态', templet: '#menu-status' },
                {
                  field: 'isMenu',
                  width: 80,
                  align: 'center',
                  templet: function (d) {
                    if (d.menuType == 0) {
                      return '<span class="layui-badge layui-bg-blue">目录</span>';
                    }
                    if (d.menuType == 1) {
                      return '<span class="layui-badge-rim">菜单</span>';
                    } else {
                      return '<span class="layui-badge layui-bg-gray">按钮</span>';
                    }
                  },
                  title: '类型'
                },
                { templet: '#auth-state', width: 200, align: 'center', title: '操作' }
              ]
            ],
            done: function () {
              layer.closeAll('loading');
            }
          });
        };
        renderTable();
        $('#btn-refresh').click(function () {
          renderTable();
        });
        $('#btn-expand').click(function () {
          treetable.expandAll('#munu-table');
        });

        $('#btn-fold').click(function () {
          treetable.foldAll('#munu-table');
        });
        $('#addChild').click(function () {
          var index = layer.open({
            title: '添加用户',
            type: 2,
            shade: 0.2,
            maxmin: true,
            shadeClose: false,
            area: ['80%', '80%'],
            content: '/page/menu/add.html'
          });
          $(window).on('resize', function () {
            layer.full(index);
          });
        });

        //监听工具条
        table.on('tool(munu-table)', function (obj) {
          var data = obj.data;
          var layEvent = obj.event;
          var tableId = data['menuId'];
          if (layEvent === 'del') {
            layer.confirm('真的删除行 [ ' + data.menuName + '] 么', function (index) {
              obj.del(); // 删除对应行（tr）的DOM结构
              // 向服务端发送删除指令
              $.ajax({
                url: '/sys-menu/' + tableId,
                type: 'delete',
                async: false,
                success: function (result) {
                  if (result.success) {
                    layer.close(index);
                    $('#btn-refresh').click();
                  } else {
                    layer.msg(result.msg, { icon: 2, time: 1000 });
                  }
                }
              });
            });
          } else if (layEvent === 'edit') {
            var index = layer.open({
              title: '修改用户',
              type: 2,
              shade: 0.2,
              maxmin: true,
              shadeClose: false,
              area: ['80%', '80%'],
              content: '/page/menu/edit.html',
              success: function (layero, index, that) {
                var iframe = window['layui-layer-iframe' + index];
                iframe.init(data);
              }
            });
            $(window).on('resize', function () {
              layer.full(index);
            });
          }
        });
      });
    </script>
  </body>
</html>
